<!--
 * @Date: 2024-02-27 15:33:40
 * @Auth: 463997479@qq.com
 * @LastEditors: 463997479@qq.com
 * @LastEditTime: 2024-02-28 14:18:03
 * @FilePath: \ztc-web\src\views\assessment\addAssessmentDialog.vue
-->
<template>
  <el-dialog
    v-model:modelValue="centerDialogVisible"
    :title="`${data.id ? '修改' : '新增'}违规预警信息`"
    width="520"
    center
  >
    <el-form
      ref="ruleFormRef"
      :model="formData"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="车牌号" prop="plateNo">
        <el-input
          v-model="formData.plateNo"
          placeholder="请输入车牌号"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item label="类型" prop="typeName">
        <el-select v-model="formData.typeName" placeholder="请选择类型">
          <el-option
            v-for="(item, index) in event_typeid"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="过车时间" prop="passTime">
        <el-date-picker
          v-model="formData.passTime"
          type="datetime"
          placeholder="请选过车时间"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >确认</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { toRefs, watch } from "vue";

import { ElMessage } from "element-plus";
const props = defineProps({
  centerDialogVisible: {
    type: Boolean,
    default: false,
  },

  data: {
    type: Object,
    default: {},
  },
});
const emits = defineEmits();
const formData = ref({});
const ruleFormRef = ref();
const { centerDialogVisible, data } = toRefs(props);

watch(
  () => data,
  (newValue) => {
    formData.value = newValue.value;
  },
  { immediate: true, deep: true }
);
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      emits(
        "complete",
        formData.value,
        () => {
          emits("update:modelValue", false);
          if (formData.value.id) {
            ElMessage({
              message: "修改成功",
              type: "success",
            });
          } else {
            ElMessage({
              message: "新增成功",
              type: "success",
            });
          }
          formEl.resetFields();
        },
        formEl
      );
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm = (formEl) => {
  emits("update:modelValue", false);
};

const { proxy } = getCurrentInstance();
const { event_typeid } = proxy.useDict("event_typeid");
</script>
